<template>
  <!-- 修改密码-->
  <div class="workOrder-overview-modify">
    <div class="app-content-container">
      <el-row :gutter="20">
        <el-form
          ref="form"
          label-position="top"
          label-width="80px"
          :rules="rules"
          :model="user"
        >
          <!--左侧信息-->
          <el-col :span="12">
            <el-card style="height: 700px">
              <!--工单信息-->
              <div class="form-card-title">
                <span>修改密码</span>
              </div>
              <div class="form-card-content">
                <el-row :gutter="35">
                  <el-col :span="8">
                    <el-form-item label="旧密码" prop="oldPassword">
                      <el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="35">
                  <el-col :span="8">
                    <el-form-item label="新密码" prop="newPassword">
                      <el-input v-model="user.newPassword" placeholder="请输入新密码" type="password"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="35">
                  <el-col :span="8">
                    <el-form-item label="确认密码" prop="confirmPassword">
                      <el-input v-model="user.confirmPassword" placeholder="请确认密码" type="password"/>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-button type="primary" @click="submit">
                  提交
                </el-button>

                <!--<span>修改密码成功，请重新登录</span>-->
              </div>
            </el-card>
          </el-col>
        </el-form>
      </el-row>
    </div>
  </div>
</template>

<script>
  import {updateUserPwd} from "@/api/system/user";

  export default {
    data() {
      const equalToPassword = (rule, value, callback) => {
        if (this.user.newPassword !== value) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      };
      return {
        test: "1test",
        user: {
          oldPassword: undefined,
          newPassword: undefined,
          confirmPassword: undefined
        },
        // 表单校验
        rules: {
          oldPassword: [
            {required: true, message: "旧密码不能为空", trigger: "blur"}
          ],
          newPassword: [
            {required: true, message: "新密码不能为空", trigger: "blur"},
            {min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur"}
          ],
          confirmPassword: [
            {required: true, message: "确认密码不能为空", trigger: "blur"},
            {required: true, validator: equalToPassword, trigger: "blur"}
          ]
        }
      };
    },
    methods: {
      submit() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            updateUserPwd(this.user.oldPassword, this.user.newPassword).then(
              response => {
                this.logout()
              }
            );
          }
        });
      },
      async logout() {
        this.$alert('修改密码成功，请重新登录', '提示', {
          closeOnClickModal: false,
          showClose: false
        }).then(() => {
          this.$store.dispatch('user/logout').then(() => {
            location.href = '/login'
          })
        })
      },
      close() {
        this.$store.dispatch("tagsView/delView", this.$route);
        this.$router.push({path: "/index"});
      }
    }
  };
</script>
